<template>
  <div class="content">
    <span>内容简介</span>
    <div class="content-text" v-html="summary"></div>
  </div>
</template>

<script>
export default {
  props: ['bookDetail'],
  computed: {
    summary() {
      // 对sunmary的\n进行换行显示，通过v-html指令就可以，mpvue已经支持了该指令
      if (this.bookDetail.summary) {
        const repalceStr = this.bookDetail.summary.replace(/\\n/g, '</p><p>')
        const content = `<p>${repalceStr}</p>`
        return content
      }
    }
  },
};
</script>

<style scoped>
.content {
  background-color: #fff;
  text-align: center;
  margin: 20rpx 0;
  padding: 10rpx 20rpx;
}
.content-text {
  text-align: justify;
  font-size: 24rpx;
  /* 这样会对所有下面的段落进行缩进显示 */
  text-indent: 48rpx;
}
</style>